﻿@model WD.Web.PagerInfo
@{
    var 总页数 = Model.TotalPageCount;
    var 当前页数 = Model.CurrentPageIndex;
    const int 显示按钮数 = 5;
    const int 中间按钮位置 = (显示按钮数 - 1) / 2;
}
<style>
    .pagination a { cursor: pointer; }
</style>
<script>

    $("a", $('[role="PagerArea"] .pagination')).click(function () {
        var index = $(this).data("id");
        if ($("#pageIndex").val() != index) {
            $("#pageIndex").val(index);
            PagerHandle();
        }
    });

    //排序点击事件
    $('[role="sort"]').click(function () {
        console.log(12);
        var field = $(this).data("field");
        $("#OrderField").val(field);
        var direction = $(this).data("direction");
        direction = direction == "desc" ? "asc" : "desc";
        $("#OrderDirection").val(direction);
        SearchTab({
            callback: function () {
                $('[data-field="' + field + '"]').addClass(direction).data("direction", direction);
            }
        });
    });


    function PagerHandle() {
        var index = $("#pageIndex").val();
        if (parseInt(index) <= parseInt("@总页数")) {
            SearchTab();
        }
    }

</script>
<div role="PagerArea" class="clearfix">
    <input type="hidden" name="OrderField" id="OrderField" />
    <input type="hidden" name="OrderDirection" id="OrderDirection" />

    @if (Model.TotalItemCount == 0)
    {
        <h1 class="text-center">未查询到数据</h1>
    }
    else
    {
        <div class="pull-left pagination">
            当前第 @Model.CurrentPageIndex / @Model.TotalPageCount 页 共计 @Model.TotalItemCount 项

            <select name="pageSize" id="pageSize" style="margin-left: 10px;" onchange="SearchTab()">
                <option value="10">每页10行</option>
                <option value="30">每页30行</option>
                <option value="50">每页50行</option>
                <option value="100">每页100行</option>
                <option value="200">每页200行</option>
            </select>

        </div>

        <div class="input-group pull-right" style="width: 100px; margin: 5px 0 5px 10px;">
            <input type="text" name="pageIndex" id="pageIndex" value="@Model.CurrentPageIndex" class="form-control text-center"  />
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button" onclick=" PagerHandle(); ">跳转</button>
            </span>
        </div>

        <ul class="pagination pull-right">
            <li  class="@(当前页数 == 1 ? "disabled" : "")"><a data-id="1"><i class="fa fa-angle-double-left"></i></a></li>
            <li  class="@(当前页数 == 1 ? "disabled" : "")"><a data-id="@(当前页数 > 1 ? (当前页数 - 1) : 1)"><i class="fa fa-chevron-left"></i></a></li>
            @if (显示按钮数 >= 总页数)
            {
                for (int i = 0; i < 总页数; i++)
                {
                <li class="@((i + 1) == 当前页数 ? "active" : "")"><a data-id="@(i + 1)">@(i + 1)</a></li>
                }
            }
            else
            {
                for (int i = 当前页数 - 中间按钮位置; i < 当前页数; i++)
                {
                    if (i > 0)
                    {
                <li class=""><a  data-id="@(i)">@(i)</a></li>
                    }
                }

                <li class="active"><a data-id="@(当前页数)" >@(当前页数)</a></li>

                for (int i = 当前页数 + 1; i <= (当前页数 + 中间按钮位置); i++)
                {
                    if (i <= 总页数)
                    {
                <li><a data-id="@(i)">@( i)</a></li>
                    }
                }
            }
            <li class="@(当前页数 == 总页数 ? "disabled" : "")"><a data-id="@(当前页数 >= 总页数 ? 总页数 : (当前页数 + 1))" ><i class="fa fa-chevron-right"></i></a></li>
            <li  class="@(当前页数 == 总页数 ? "disabled" : "")"><a data-id="@总页数"><i class="fa fa-angle-double-right"></i></a></li>
        </ul>
    }

</div>
